import { memo, useEffect, useState } from "react";
import "./App.css";

function Aaa() {
    const [,setNum] = useState(1);

    useEffect(() => {
        setInterval(()=> {
            setNum(Math.random());
        }, 2000)
    },[]);

    const [count, setCount] = useState(1);
    useEffect(() => {
        setInterval(()=> {
            setCount(Math.random());
        }, 2000)
    },[]);

    return <div>
        <MemoBbb count={count}></MemoBbb>
    </div>
} 


function Bbb(props) {
    console.log('bbb render');
    return <h2>{props.count}</h2>
}
// 如果不加memo，Bbb组件会渲染很多次；
// 加了Memo，只有当props修改时，Bbb组件才会发生改变
const MemoBbb = memo(Bbb)



function App() {
    return (
      <Aaa></Aaa>
    )
}

export default App;
